<template>
    <div class="box-column container-grid">
        <el-tabs type="border-card" class="box-flex1">
            <!-- #todu 可以写个数组来管理 -->
            <el-tab-pane label="原始打卡记录">
                <originalTable :data="infoData"></originalTable>
            </el-tab-pane>
            <el-tab-pane label="打卡日统计" lazy>
                <dayTable :data="infoData"></dayTable>
            </el-tab-pane>
            <el-tab-pane label="打卡月统计" lazy>
                <monthTable :data="infoData"></monthTable>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { mixinTabPage } from "@/mixin/tab/Page";
import originalTable from "./originalTable.vue";
import dayTable from "./dayTable.vue";
import monthTable from "./monthTable.vue";
@Component({
    mixins: [mixinTabPage],
    components: {
        originalTable,
        dayTable,
        monthTable
    }
})
export default class kqLogHome extends Vue {
    infoData: any = {};
    editInit({ data }) {
        this.infoData = data;
    }
}
</script>
<style scoped lang="scss">
::v-deep.el-tabs {
    @include box-display(column);
    margin-bottom: 10px;
    .el-tabs__content {
        @include box-flex(1);
        .el-tab-pane {
            height: 100%;
            & > div {
                height: 100%;
            }
        }
    }
}
</style>
